<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>redis数据查询工具</title>
    <link rel="stylesheet" href="../../css/font-awesome.min.css" />
    <link rel="stylesheet" href="../../css/fa-font-awesome.min.css" />
    <link rel="stylesheet" href="../../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/animate.min.css" />
    <link rel="stylesheet" href="../../css/appbase.css" />
    <link rel="stylesheet" href="../../css/style.css" />
	<link rel="stylesheet" href="../../plugins/jsonview/jquery.jsonview.min.css" />

	<style>
		.right-box{
			display: none;
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			width: 600px;
            overflow-y: scroll;
            height: 100%;
			z-index: 10;
			background-color: whitesmoke;
			transition:all linear 0.5s;
		}
		.right-box>.close-box{
			position: fixed;
			top: 2px;
			right: 10px;
			font-size: 15px;
			font-weight: lighter;
			color: #999;
			cursor: pointer;
		}
		.right-box>.content{
			padding: 10px;
			font-size: 15px;

			word-break: break-all;
		}

        #data table>tbody>tr>td{
            word-break: break-word;
        }

		#hashKeyQuery .list-group{
			height: 55vh;
			overflow-y: scroll;
		}

		.list-group#loadclasses{
			height: 53vh;
			overflow-y: scroll;
		}
	</style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="javascript:;" class="navbar-brand">redis 数据展示</a>
        </div>
    </div>
</nav>

<!--连接设置信息-->
<div class="container-fluid">
    <div class="panel panel-default ">
        <div class="panel-heading">设置区</div>
        <div class="panel-body">
			<div class="row">
				<div class="col-xs-9 ">
					<div class="input-group input-group-sm">
						<div class="input-group-btn" id="connect">
							<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
								<span></span> <span class="caret"></span>
							</button>
							<ul class="dropdown-menu">
							</ul>
						</div>
						<input class="form-control" name="connect" disabled/>
					</div>
				</div>
				<div class="col-xs-3">
					<div class="button-group ">
						<button id="newconnbtn" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i> 新连接</button>
					</div>
				</div>
			</div>
			<div class="row margin-top">
				<div class="col-xs-12">
					<div class="form-inline " id="serializableConfig">
						<div class="form-group form-group-sm">
							<label for="" class="control-label">key</label>
							<select class="form-control " name="key"></select>
						</div>
						<div class="form-group form-group-sm">
							<label for="" class="control-label">value</label>
							<select class="form-control " name="value"></select>
						</div>
						<div class="form-group form-group-sm">
							<label for="" class="control-label">hashKey</label>
							<select class="form-control " name="hashKey"></select>
						</div>
						<div class="form-group form-group-sm">
							<label for="" class="control-label">hashValue</label>
							<select class="form-control " name="hashValue"></select>
						</div>
					</div>
				</div>
			</div>

        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-7">
            <div>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li><a href="#topology"  data-toggle="tab">拓扑结构</a></li>
                    <li class="active"><a href="#data" data-toggle="tab">数据查询</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane " id="topology">
						<table class="table table-bordered table-striped">
							<thead>
							<tr>
								<th>id</th>
								<th>host:port</th>
								<th>role</th>
								<th>master</th>
							</tr>
							</thead>
							<tbody>

							</tbody>
						</table>
					</div>
                    <div role="tabpanel" class="tab-pane active" id="data">
                        <div class="row padding-bottom padding-top">
                            <div class="col-xs-12">
                                <div class="input-group">
                                    <input type="text" name="searchkeys" tabindex="1" autocomplete="off" spellcheck="false" class="form-control" placeholder="输入搜索key" />
                                    <div class="input-group-btn">
                                        <button class="btn btn-primary" name="searchkeys" tabindex="2"><i class="fa fa-search"></i> 搜索</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <table class="table table-striped table-hover table-bordered">
                                    <thead>
                                    <tr>
                                        <th>key</th>
                                        <th>type</th>
                                        <th>ttl</th>
                                        <th>pttl</th>
                                        <th>length</th>
                                    </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
        <div class="col-xs-5 padding">
            <div class="row padding-top">
				<div class="col-xs-12">
					<div class="panel panel-default">
						<div class="panel-heading">类加载器配置</div>
						<div class="panel-body">
							<form class="form-inline" id="config">
								<div class="form-group">
									<label class="control-label">类加载器:</label>
									<select class="form-control margin-right" name="classloaders">
									</select>
								</div>

								<div class="file form-control" ><input type="file" name="fileItem"/>上传 DTO</div>
							</form>
							<ul class="list-group padding-top" id="loadclasses">
							</ul>
						</div>
					</div>
				</div>

            </div>
        </div>
    </div>
</div>

<!-- 右侧弹出框 -->
<div class="right-box" id="rightbox">
	<div class="close-box">
		<i class="fa fa-close"></i>
	</div>

	<div class="content"></div>
</div>

<!-- hash keys 列表 -->
<div class="open-dialog" id="hashKeyQuery">
	<div >
		<div class="form-group form-group-sm">
			<input type="text" class="form-control" placeholder="输入 hashKey " />
		</div>
	</div>
	<!-- 如果需要列出所有的key -->
	<a href="javascript:void(0)" class="btn btn-link text-info">列出所有 hashKey </a>
	<div class="list-group ">

	</div>
</div>

<!-- List 范围查询弹出框 -->
<div class="open-dialog" id="rangeQuery">
	<div class="col-xs-12">
		<div class="form-inline ">
			<div class="form-group form-group-sm">
				<input type="text" size="5" class="form-control" name="begin" placeholder="最小值">
				<input type="text" size="5" class="form-control" name="begin" placeholder="最大值">
			</div>
		</div>

	</div>
</div>

<!--新连接弹出框-->
<div class="open-dialog" id="newconn">
	<form class="form-horizontal">
		<div class="form-group">
			<label class="control-label col-sm-3 col-lg-2">连接名:</label>
			<div class="col-sm-9 col-lg-5">
				<input type="text" name="name" autocomplete="false"  spellcheck="false" class="form-control" placeholder="连接名称" />
			</div>
		</div>

		<div class="form-group">
			<label class="control-label col-sm-3 col-lg-2">地址路径:</label>
			<div class="col-sm-9 col-lg-9">
				<input type="text" name="connectStrings" autocomplete="false" spellcheck="false"  class="form-control" placeholder="请求地址" />
			</div>
		</div>

		<div class="form-group">
			<label class="control-label col-sm-3 col-lg-2">密码:</label>
			<div class="col-sm-9 col-lg-5">
				<input type="text" name="auth" autocomplete="false" spellcheck="false"  class="form-control" placeholder="密码" />
			</div>
		</div>
	</form>
</div>

<!--key 信息表格模板 -->
<script type="text/html" id="keysTemplate">
	{{each redisKeyResults as redisKeyResult}}
	<tr key="{{redisKeyResult.key}}" type="{{redisKeyResult.type}}">
		<td>{{redisKeyResult.key}}</td>
		<td>{{redisKeyResult.type}}</td>
		<td>{{redisKeyResult.ttl}}</td>
		<td>{{redisKeyResult.pttl}}</td>
		<td>{{redisKeyResult.length}}</td>
	</tr>
	{{/each}}
</script>

<!--topology 信息表格模板 -->
<script type="text/html" id="topologyTemplate">
	{{each nodes as node}}
	<tr key="{{node.id}}" >
		<td>{{node.id}}</td>
		<td>{{node.hostAndPort.host}}:{{node.hostAndPort.port}}</td>
		<td>{{node.role}}</td>
		<td>{{node.master}}</td>
	</tr>
	{{/each}}
</script>

<script type="text/javascript" src="../../js/requirejs2.1.11-min.js"></script>
<script type="text/javascript" src="../config.js"></script>
<script type="text/javascript">
    require(['bootstrap','tools/redishelp']);
</script>
</body>
</html>